<!DOCTYPE html>
<html lang="en">
{% load static%}
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登入</title>
      <link rel="icon" href="{% static 'xny.ico' %}" type="image/x-icon">
    <!-- <link rel="stylesheet" href="text.css" /> -->
      <script type="text/javascript" src="{% static 'js/md5-min.js' %}"></script>
        <script src="{% static 'js/jquery.min.js' %}"></script>
  </head>
  <style>
    .all {
      width: 800px;
      box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
      margin: auto;
      margin-top: 5%;
      display: flex;
      border-radius: 35px;
      {#background-color: #dfe0e1;#}
      height: 550px;
       background-color: rgba(223, 224, 225, 0.7);
    }
    .log {
      width: 50%;
      margin: auto;
    }
    .reg {
      width: 50%;
      height: 100%;
      margin: auto;
      background-color: #f0f0f0;
      border-radius: 35px;
      color: #ffffff;
    }
    .reg_1 {
      text-align: center;
      margin: auto;
      margin-top: 35%;
    }
    .reg_1 h2 {
      font-weight: 700;
    }
    .reg_1 p {
      margin: 15px 0px 25px 0px;
    }
    .sig {
      width: 180px;
      height: 60px;
      border-radius: 30px;
      background-image: linear-gradient(to right, #084298, #0b5ed7);
      border-color: #fff;
      color: #ffffff;
        margin-left: 18px;
        margin-top: 20px;
    }
    #tiao {
      padding: 0em 0;
    }
    .reg_1 a {
      color: #ffffff;
    }
    h3 {
      font-size: 3em;

      padding-bottom: 1em;
      margin: 0;
      text-align: center;
      font-family: "Marvel-Regular";
    }
    .input {
      margin: 10px 50px;
      width: 300px;
      height: 70px;
    }
    span {
      color: #2c3034;
      font-size: 0.85em;
      padding-bottom: 0.2em;
      display: block;
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .input-text {
      border: 1px solid #555;
      outline-color: #fd9f3e;
      width: 90%;
      font-size: 1em;
      padding: 0.5em;
      line-height: inherit;
    }
    .register-top-grid {

      padding-bottom: 1em;
      margin: 0;
      font-family: "Marvel-Regular";
      margin: 10px 0;
    }
    .text-center {
      text-align: center;
    }
    .tijiao {
      width: 180px;
      height: 60px;
      border-radius: 30px;
      background-image: linear-gradient(to right, #084298, #0b5ed7);
      border: none;
        color: #ffffff;
    }
  </style>
  <body style="width: 100%;height: 100%;background-image: url(../../static/images/index/beijing.gif);background-size: cover;">
    <div class="all">
      <div class="log">
        <div class="register">
            <div id="myPopup"
                 style="display:none; position:fixed; top:30%; left:40%; transform:translate(-50%, -50%); background-color:white; padding:20px; border:1px solid #ccc; z-index:1000;">
                <span style="color:red;" id="aSpan"></span>
                <span style="color:red;" id="pSpan"></span>




            </div>
          <form method="post" action="/login/" onsubmit="return login();">

            <div class="register-top-grid">
                {% csrf_token %}
              <h3>用户登录</h3>
              <div class="input">
                <span>用户名 <label style="color: red">* </label></span>
                <input
                  type="text"
                  id="name"
                  name="name"
                  placeholder="请输入用户名"
                  class="input-text"
                />

              </div>
              <div class="input">
                <span>密码 <label style="color: red">*</label></span>
                <input
                  type="password"
                  id="password"
                  name="password"
                  placeholder="请输入密码"
                  class="input-text"
                />

              </div>
                <div class="input">
                    <span>验证码 <label style="color: red">* </label></span>
                <input type="text" style="width: 40%" class="input-text" id="code" onblur="checkCode(this.value)">
                        <div style="width: 40%;height: 45px;padding-left: 52%;margin-top: -40px;"><img style="width: 100%;height: 100%" src="/loadCode.jpg" onclick="changeCode(this)"></div><span style="color:red;" id="cSpan"></span>
                </div>
                <span style="color:red;" id="cSpan"></span>
            </div>
            <div class="text-center">
            <button class="tijiao">登入</button>
            </div>
          </form>
        </div>
      </div>
      <div class="reg">
        <div class="reg_1">
            <a href="/admin/"><button type="primary" class="sig">管理员</button></a>
          <a href="/register/"><button type="primary" class="sig">注册</button></a>
            <a href="/"><button type="primary" class="sig">回到首页</button></a>
        </div>
      </div>
    </div>
  </body>
  <script>
            function isValidName(name)  {
              var regex = /^[a-zA-Z0-9\s\-_.]+$/;
            return regex.test(name);
             }

            function login() {
                //获取输入框的值
                var name = $('#name').val();
                var password = $('#password').val();

                if (checkUnames(name,password)){
                    $('#aSpan').text('用户名 或者密码不正确');
                    showPopup()
                    return false;
                }

                if (password.length < 6) {
                    $('#pSpan').text('密码长度不能小于六位');
                    showPopup()
                    return false;
                }


                var code = $('#code').val();
                var cflag = checkCode(code);

                if (!cflag) {
                    $('#cSpan').text('验证失败，请重新输入验证码');
                    return false;


                    var time = new Date().getTime();
                    $('#time').val(time)


                    return true

                }
            }


        function checkUnames(name,password) {
            var flag = false
            //返回Ture，表示这个用户名已经存在
            $.ajax({
                url: '/checkUnames/',
                type: 'GET',
                async: false, //false表示同步请求，ture表示异步
                data: {"name": name,
                       "password":password,
                },
                success: function (result) {
                    var flag2 = result.flag;
                    if (!flag2) {
                        flag = true;
                        $('#aSpan').html('用户名已经存在');
                        showPopup()
                    }
                }

            })
            return flag
        }

            //切换验证码
            function changeCode(imgObj) {
                imgObj.src = '/loadCode.jpg?time-' + new Date().getTime();
                {#$(obj).attr('src', '/user/vcode/?r=' + new Date().getTime())#}
            }

            function checkCode(txt) {
                var cflag = false;
                $.ajax({
                    url: '/checkcode/',
                    type: 'get',
                    data: {'code': txt},
                    async: false,
                    success: function (result) {
                        var flag = result.flag;
                        if (flag) {
                            cflag = true;
                            $('#cSpan').text('验证成功');

                        } else {
                            $('#cSpan').text('验证失败，请重新输入验证码');

                        }
                    }
                })

                return cflag;

            }
    function showPopup() {
        // 显示弹窗
        $('#myPopup').show();

        // 设置延时2秒后隐藏弹窗
        setTimeout(function(){
            $('#myPopup').hide();
        }, 2000); // 2000毫秒 = 2秒
    }
    </script>

</html>